<template>
  <div>
  <el-col :span="item.config.span" :class="{'none-display': !getItemLabel}" v-if="item.config.isShow || item.config.isShow == undefined">
    <el-form-item
      :required="item.config.required"
      :label-width="item.config.labelWidth ? `${item.config.labelWidth}px` : null"
      :prop="item.vModel">
      <template #label >
        <!-- <div v-html="getItemLabel"/> -->
        <div style="display: inline-flex;">
          <span  v-if="seqNo && item.config.tag != 't-divider' && item.config.tag != 'form-pagination'  && item.config.tag != 't-random-number' && item.config.tag != 't-slider' && item.config.tag != 't-image-carousel' && item.config.tag != 't-image' && item.config.tag != 'desc-text'">
            {{seqNo}}.
          </span>

          <span style="flex:1" v-html="getItemLabel"></span>
        </div>
      </template>
      <!--特殊处理组件 二次包装的组件-->
      <template v-if="componentList.includes(item.typeId)">
        <component
        :key="item.vModel"
          :ref="item.vModel"
          :is="getComponentName(item)"
          v-model="dataModel"
          :item="item"
          :models="models"
        />
      </template>
      <template v-else-if="['RADIO', 'CHECKBOX'].includes(item.typeId)">
        <component
        :key="item.vModel"
        :ref="item.vModel"
          :is="getComponentName(item)"
          v-model="dataModel"
          :item="item"
          :models.sync="models"
          @other-input-change="otherInputChange"
        />
      </template>
      <!--  OCR组件-->
      <template v-else-if="['OCR'].includes(item.typeId)">
        <component
        :key="item.vModel"
        :ref="item.vModel"
          :is="getComponentName(item)"
          v-model="dataModel"
          :item="item"
          :models="models"
          @ocr-success="(val)=>{$emit('ocr-success',val)}"
        />
      </template>
      <!--       分页-->
      <template v-else-if="['PAGINATION'].includes(item.typeId)">
        <component
        :ref="item.vModel"
        :key="item.vModel"
          :is="getComponentName(item)"
          v-bind="{...item}"
          @next="(page)=>{$emit('next',page)}"
          @prev="(page)=>{$emit('prev',page)}"
        />
      </template>
      <template v-else-if="['MATRIX_TABLE'].includes(item.typeId)">
        <component
        :ref="item.vModel"
        :key="item.vModel"
          :is="getComponentName(item)"
          v-model="dataModel"
          :item="item"
          v-bind="{...item}"
          :models.sync="models"
          @other-input-change="otherInputChange"
        />
      </template>
      <template v-else>
        <!--    其他无特殊处理组件-->
        <component
          :key="item.vModel"
          :is="getComponentName(item)"
          :item="item"
          v-model="dataModel"
          v-bind="{...item}"
        />
      </template>
    </el-form-item>
  </el-col>
  </div>

</template>

<script>
import '../../components/FormItem/autoRegister.js'
import {handleChangeLabel} from './FormItemLabel'
import {isMobile} from '../../utils'

export default {
  name: 'GenerateFormItem',
  props: ['item', 'models', 'rules', 'index', 'seqNo'],
  data() {
    return {
      componentList: ['SELECT', 'IMAGE_CAROUSEL', 'IMAGE_UPLOAD', 'UPLOAD', 'CASCADER', 'IMAGE_SELECT', 'INPUT',
        'DATE', 'SUB_FORM', 'RATE', 'SLIDER', 'NUMBER', 'FUNCTION_CALC', 'PROVINCE_CITY'],
      config: this.item.config,
      dataModel: this.models[this.item.vModel]
    }
  },
  computed: {
    getItemLabel() {
      if (!this.item.config.showLabel) {
        return ''
      }
      let label = ''
      // if (this.seqNo != null) {
      //   label = `<span style="float: left;">${this.seqNo}：</span>`
      // }
      return label + this.item.config.label
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.item.vModel] = val
        handleChangeLabel(this.models, this.item, val)
        this.$emit('update:models', {
          ...this.models,
          [this.item.vModel]: val
        })
        this.$emit('input-change', val, this.item.vModel, this.item)
      }
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModel = val[this.item.vModel]
      },
    }
  },
  created() {
    console.log(this.item.config.isShow,'item----------------------')
  },
  mounted() {


  },
  methods: {
    aaa(){
      this.$nextTick(function(){
        this.$refs[this.item.vModel].aaa()
      })
    },
    // RADIO CHECKBOX 其他输入框输入
    otherInputChange(value, item) {
      handleChangeLabel(this.models, item, value)
    },
    getComponentName(item) {
      // 是否是移动端环境
      if (isMobile() && item.config.mobileTag) {
        return item.config.mobileTag
      }
      return item.config.tag
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100% !important;
}

.el-form-item__label > div {
  display: inline-block;
  width: 95%;
}

.none-display{
  ::v-deep .el-form-item__label {
    display: none!important;
  }
}
</style>
